<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>商城管理</el-breadcrumb-item>
				<el-breadcrumb-item>编辑配送</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="content-box">
			<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="基本信息" name="info">
						<div class="tab-content">
							<el-form-item label="是否启用">
								<el-switch :active-value="0" :inactive-value="1" v-model="model.status"></el-switch>
							</el-form-item>
							<el-form-item prop="merchantId" label="所属商户">
								<dt-merchant-select v-model="model.merchantId" placeholder="请选择..."></dt-merchant-select>
							</el-form-item>
							<el-form-item prop="title" label="配送名称">
								<el-input v-model="model.title" placeholder="必填，128字符内"></el-input>
							</el-form-item>
							<el-form-item label="首重费用">
								<el-row class="select-list">
									<el-col :xs="24" :sm="12">
										<el-form-item prop="firstWeight">
											<el-input v-model="model.firstWeight" placeholder="首重重量">
												<template slot="prepend">
													首重
												</template>
												<template slot="append">
													千克
												</template>
											</el-input>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12">
										<el-form-item prop="firstPrice">
											<el-input v-model="model.firstPrice" placeholder="0.00">
												<template slot="prepend">
													价格
												</template>
												<template slot="append">
													元
												</template>
											</el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form-item>
							<el-form-item label="续重费用">
								<el-row class="select-list">
									<el-col :xs="24" :sm="12">
										<el-form-item prop="secondWeight">
											<el-input v-model="model.secondWeight" placeholder="续重重量">
												<template slot="prepend">
													续重
												</template>
												<template slot="append">
													千克
												</template>
											</el-input>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12">
										<el-form-item prop="secondPrice">
											<el-input v-model="model.secondPrice" placeholder="0.00">
												<template slot="prepend">
													价格
												</template>
												<template slot="append">
													元
												</template>
											</el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form-item>
							<el-form-item prop="priceType" label="费用类型">
								<el-radio-group v-model="model.priceType">
									<el-radio-button :label="0">统一设置</el-radio-button>
									<el-radio-button :label="1">指定地区</el-radio-button>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="配送地区" v-if="model.priceType===1">
								<el-row>
									<el-col :span="24">
										<el-button icon="el-icon-plus" @click="addAreaRow">添加地区</el-button>
									</el-col>
								</el-row>
								<el-table :data="model.deliveryAreas" class="table-form mat-20" border>
									<el-table-column min-width="120" label="配送地区">
										<template slot-scope="scope">
											<el-form-item :prop="'deliveryAreas.'+scope.$index+'.areaId'" :rules='rules.areaId'>
												<el-select size="small" v-model="scope.row.province" placeholder="请选择...">
													<el-option v-for="item in provinceList"
															   :key="item.id"
															   :label="item.title"
															   :value="item.title">
													</el-option>
												</el-select>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column min-width="100" label="首重费用(元)">
										<template slot-scope="scope">
											<el-form-item :prop="'deliveryAreas.'+scope.$index+'.firstPrice'" :rules='rules.firstPrice'>
												<el-input size="small" v-model="scope.row.firstPrice" placeholder="0.00"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column min-width="100" label="续重费用(元)">
										<template slot-scope="scope">
											<el-form-item :prop="'deliveryAreas.'+scope.$index+'.secondPrice'" :rules='rules.secondPrice'>
												<el-input size="small" v-model="scope.row.secondPrice" placeholder="0.00"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column fixed="right" width="60" label="操作" align="center">
										<template slot-scope="scope">
											<el-link :underline="false" icon="el-icon-delete" @click="removeAreaRow(scope.$index)"></el-link>
										</template>
									</el-table-column>
								</el-table>
							</el-form-item>
							<el-form-item label="其它默认费用" v-if="model.priceType===1">
								<el-switch :active-value="1" :inactive-value="0" v-model="model.isDefault"></el-switch>
							</el-form-item>

							<el-form-item label="物流保价">
								<el-switch :active-value="1" :inactive-value="0" v-model="model.isInsure"></el-switch>
							</el-form-item>
							<el-form-item label="保价费用" v-if="model.isInsure==1">
								<el-row class="select-list">
									<el-col :xs="24" :sm="12">
										<el-form-item prop="insureRate">
											<el-input v-model="model.insureRate" placeholder="千分之一">
												<template slot="prepend">
													费率
												</template>
												<template slot="append">
													‰
												</template>
											</el-input>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12">
										<el-form-item prop="insurePrice">
											<el-input v-model="model.insurePrice" placeholder="最低保价费">
												<template slot="prepend">
													最低
												</template>
												<template slot="append">
													元
												</template>
											</el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form-item>
							<el-form-item prop="remark" label="备注说明">
								<el-input type="textarea" :rows="3" v-model="model.remark" maxlength="512" show-word-limit placeholder="可空，限512字符内"></el-input>
							</el-form-item>
							<el-form-item prop="sortId" label="排序数字">
								<el-input v-model="model.sortId" placeholder="数字越小越排前"></el-input>
							</el-form-item>
							<el-form-item label="创建时间" v-if="model.id>0">
								{{model.addBy}} {{model.addTime}}
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	import DtMerchantSelect from '../../../components/DtMerchantSelect.vue'
	
	export default {
		components: {
			DtMerchantSelect
		},
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				loading: false, //加载状态
				merchantList: [], //商户列表
				merchantSelected: {}, //商户对象
				provinceList: [], //省份列表
				model: {
					id: 0,
					merchantId: 0,
					title: null,
					remark: null,
					firstWeight: null,
					firstPrice: null,
					secondWeight: null,
					secondPrice: null,
					isInsure: 0,
					insureRate: 0,
					insurePrice: 0,
					priceType: 0,
					isDefault: 0,
					sortId: 99,
					status: 0,
					addBy: null,
					addTime: null,
					deliveryAreas: []
				},
				rules: {
					title: [
						{ required: true, message: '请输入配送名称', trigger: 'blur' }
					],
					merchantId: [
						{ required: true, message: '请选择所属商户', trigger: 'change' }
					],
					firstWeight: [
						{ required: true, message: '请输入首重重量', trigger: 'blur' },
						{ pattern: /^[1-9]\d*$/, message: '只能为正整数', trigger: 'blur' }
					],
					firstPrice: [
						{ required: true, message: '请输入首重价格', trigger: 'blur' },
						{ pattern: /^(([0-9]|([1-9][0-9]{0,9}))((\.[0-9]{1,2})?))$/, message: '请输入正确金额，可保留两位小数', trigger: 'blur' }
					],
					secondWeight: [
						{ required: true, message: '请输入续重重量', trigger: 'blur' },
						{ pattern: /^[1-9]\d*$/, message: '只能为正整数', trigger: 'blur' }
					],
					secondPrice: [
						{ required: true, message: '请输入续重价格', trigger: 'blur' },
						{ pattern: /^(([0-9]|([1-9][0-9]{0,9}))((\.[0-9]{1,2})?))$/, message: '请输入正确金额，可保留两位小数', trigger: 'blur' }
					],
					insureRate: [
						{ required: true, message: '请输入保价费率', trigger: 'blur' }
					],
					insurePrice: [
						{ required: true, message: '请输入最低保价费', trigger: 'blur' },
						{ pattern: /^(([1-9]|([1-9][0-9]{0,9}))((\.[0-9]{1,2})?))$/, message: '请输入正确金额，可保留两位小数', trigger: 'blur' }
					],
					sortId: [
						{ required: true, message: '请输入排序数字', trigger: 'blur' },
						{ pattern: /^-?[1-9]\d*$/, message: '只能为整数', trigger: 'blur' }
					],
					province: [
						{ required: true, message: '请选择配送地区', trigger: 'change' }
					],
				}
			}
		},
		methods: {
			//初始化省份
			loadArea() {
				let _this = this;
				//加载省份列表
				_this.$api.request({
					url: '/admin/area/view/0',
					success(res) {
						_this.provinceList = res.data;
					}
				});
			},
			//初始化数据
			initData() {
				let _this = this; //当前页面
				if (_this.id) {
					_this.$api.request({
						url: '/admin/shop/delivery/' + _this.id,
						loading: true,
						success(res) {
							//赋值给model
							Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
						}
					});
				}
			},
			//提交表单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve()
					});
				});
				Promise.all([f1]).then(() => {
					//提交表单,Id大于0则修改，否则添加
					if (_this.model.id > 0) {
						_this.$api.request({
							method: 'put',
							url: '/admin/shop/delivery/' + _this.model.id,
							data: _this.model,
							successMsg: '修改配送方式已成功',
							beforeSend() {
								_this.loading = true;
							},
							success(res) {
								//可跳转加列表页
								_this.$common.linkUrl('/shop/delivery/list');
							},
							complete() {
								_this.loading = false
							}
						});
					} else {
						_this.$api.request({
							method: 'post',
							url: '/admin/shop/delivery',
							data: _this.model,
							successMsg: '新增配送方式已成功',
							beforeSend() {
								_this.loading = true;
							},
							success(res) {
								//重置表单
								_this.$refs['editForm'].resetFields();
							},
							complete() {
								_this.loading = false
							}
						});
					}
				})
			},
			//添加一行配送地区
			addAreaRow() {
				let _this = this;
				_this.model.deliveryAreas.push({
					id: 0,
					deliveryId: _this.model.id,
					province: null,
					firstPrice: null,
					secondPrice: null
				});
			},
			//删除一行配送地区
			removeAreaRow(i) {
				this.model.deliveryAreas.splice(i, 1);
			},
		},
		created() {
			this.initData(); //初始化数据
			this.loadArea(); //初始化工具栏
		}
	}
</script>